<template>
  <div class="cart-container">
    <h2>购物车信息</h2>
    <ul>
      <li v-for="item in cartList" :key="item.id">
        {{ item.name }}-{{ item.price }}元*{{ item.num }}
      </li>
    </ul>
    <h3 v-show="cartList.length !== 0">总价: {{ total }}元</h3>
    <button class="checkout" @click="onCheckout" v-show="cartList.length !== 0">
      结算
    </button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  name: 'Cart',
  data () {
    return {}
  },

  props: {},
  components: {},
  computed: {
    ...mapState('cart', ['cartList']),
    ...mapGetters('cart', ['total'])
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    ...mapActions('cart', ['checkout']),
    async onCheckout () {
      try {
        await this.checkout()
        alert('结算成功')
      } catch (error) {
        alert('结算失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.checkout {
  margin-left: 30px;
}
</style>
